<template>
 <div>  
    <div class="box" >
      <div class="top">
           <div class="title"></div>
           <div class="line"></div>
           <div class="title">智信凭证</div>
      </div>
      <div class="header">
        <div class="hitem">
           <div class="name">智信编号：</div>
           <div class="red">ZSZC15744674</div>
        </div>
        <div class="hitem">
           <div class="name">开具日期：</div>
           <div class="red">2023-10-17</div>
        </div>
      </div>
      <div class="center">
      <div class="table">
		  <div class="lefttitle " style=" border-bottom: 0px;
  border-right: 0px;">支付方</div>
		  <div class="tow" style=" border-bottom: 0px;">中数智创科技有限公司</div>
		  <div class="three" style=" font-size: 17px; 
       color: #515F9e;
         padding-left:15px ;
       font-weight: 550; box-sizing: border-box;" >支付方统一社会信用代码</div>
		  <div class="four">9013 3010 MA0D HUUJ 80</div>
		</div>
    <div class="table">
		  <div class="lefttitle" style=" border-bottom: 0px;
  border-right: 0px;">开立方</div>
		  <div class="tow" style=" border-bottom: 0px;">河北坤通建筑工程有限公司</div>
		  <div class="three" style=" font-size: 17px; 
       color: #515F9e;
         padding-left:15px ;
       font-weight: 550; box-sizing: border-box;">开立方统一社会信用代码</div>
		  <div class="four">9013 3010 MA0D HUUJ 80</div>
		</div>
    <div class="table">
		  <div class="lefttitle" style=" border-bottom: 0px;
  border-right: 0px;">接收方</div>
		  <div class="tow" style=" border-bottom: 0px;">北京天和信息技术有限公司</div>
		  <div class="three" style=" font-size: 17px; 
       color: #515F9e;
         padding-left:15px ;
       font-weight: 550; box-sizing: border-box;">接收方统一社会信用代码</div>
		  <div class="four">9013 3010 MA0D HUUJ 80</div>
		</div>
   
    <div class="table">
		  <div class="lefttitle height"  style=" border-bottom: 0px;
  border-right: 0px;">智信金额（元）</div>
		  <div class="t_cell height" style=" border-bottom: 0px;box-sizing: border-box;
        padding-left:15px ;">玖拾玖万玖仟玖佰玖拾玖元整</div>
		  <div class="t_cell height" style="width:566.8px">四列</div>
		</div>
    <div class="table">
		  <div class="lefttitle" style=" border-bottom: 0px;
  border-right: 0px;">承诺付款日</div>
		  <div class="long" style=" border-bottom: 0px;box-sizing: border-box;
        padding-left:15px ;">2023-10-22</div>
     
		</div>
      <div class="table" >
		  <div class=" lefttitle big" style="
  border-right: 0px;" >备注</div>
		  <div class="bigtow txt" 
       >本凭证可以全部或部分流转支付，流转过程见凭证流转
记录。凭证经支付方签章后即完成流转</div>
<div class=" three" style=" font-size: 17px; 
       color: #515F9e;
         padding-left:15px ;
       font-weight: 550; box-sizing: border-box;">支付方电子签章</div>
		  <div class="four" style="width:335px" ></div>
		</div>
	
      </div>
    </div>
 </div>
</template>

<script>
export default {

}
</script>

<style >
.txt{
font-family: -apple-system, BlinkMacSystemFont, Tahoma, Arial, "Hiragino Sans GB", "Microsoft YaHei", sans-serif;


}
.cline{
  border-bottom: 0px;
  border-right: 0px;
}
.table { display:table; width:1131px;margin: auto; }
.bigtow{height: 110px; display:table-cell; border:1px solid rgb(106, 106, 106);  width: 425px; }
			.big{height: 110px; display:table-cell; border:1px solid rgb(106, 106, 106);  width: 139px; }
			.t_cell { display:table-cell; border:1px solid rgb(106, 106, 106); height:48px;   }
      .four{ display:table-cell; border:1px solid rgb(106, 106, 106); height:48px;  width: 335px; }
       .long{ display:table-cell; border:1px solid rgb(106, 106, 106); height:48px;  width: 986px; }
      .three{ display:table-cell; border:1px solid rgb(106, 106, 106); height:48px;  width: 230px; }
      .height {  height:70.8px;  line-height: 70.8px;  }
      .tow{ display:table-cell;
       border:1px solid rgb(106, 106, 106);
        height:48px; 
         width: 422px; 
         box-sizing: border-box;
         padding-left: 15px;
    
         }
       .lefttitle {
         display:table-cell; 
       border:1px solid rgb(106, 106, 106); 
       height:48px;  width: 139px;
       font-size: 17px; 
       color: #515F9e;
        
       font-weight: 550;
       font-family: MicrosoftYaHeiUI;
       line-height: 48px;
       box-sizing: border-box;
        padding-left:15px ;
     }

 .box{
 background-image: url("/assets/背景.png");
  margin: 50px;
  width: 1229px;
  font-family:MicrosoftYaHeiUI;
  height: 644px;
 }
 .top{
  height: 120px;
  width: 1131px;
  border-bottom: 1px solid rgb(132, 132, 132);
  display: flex;
  justify-content: space-around;
  margin:auto;
  line-height: 120px;
  align-items: center;
  

 }
 .title{
  width: 49%;
  font-size: 30px;
  color: #333333;
  font-weight: 400;
 
  
 }
 .line{
   height: 38px;
   width: 1px;
   border-left: 1px solid #BCBCBC;
 }
 .header{
  width: 1131px;
  height: 83px;
  line-height: 83px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin:auto;
 }
 .hitem{
  display: flex;
   align-items: center;
 
 }
 .name{
  font-size: 18px;
    font-family:MicrosoftYaHeiUI;
 }
 .red{
  font-size: 20px;
  color: red;
    font-family:MicrosoftYaHeiUI;
 }
/* .center{
      width: 1131px;
      display: grid;
      grid-template-columns: auto auto auto;
      grid-template-rows: auto auto auto;
      height: 373px;  
      background-color: #000;
      grid-gap: 1px;
      margin: auto;
} */



</style>